<template>
  <layout :loading="loading" :error="error" :errorMessage="errorMsg" :layoutStyle="layoutStyle">
    <Tab>
      <Category/>
       <Banner/>
      <div></div>
    </Tab>
    <BottomBar/>
  </layout>
</template>

<script>
// @ is an alias to /src
import { getHomeData } from '@/utils/api';
import Tab from './components/Tab.vue';
import Category from './components/Category.vue';
import BottomBar from './components/BottomBar.vue';
import Banner from './components/Banner.vue';

export default {
  name: 'Home',
  components: {
    Tab,
    Category,
    BottomBar,
    Banner,
  },
  data() {
    return {
      loading: false,
      error: false,
      errorMsg: '',
      layoutStyle: {
        backgroundImage: 'url("https://fast-learn-oss.youbaobao.xyz/tb/bg.png")',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 557px',
      },
    };
  },
  created() {
    getHomeData().then((res) => {
      console.log(res);
      this.loading = false;
      this.error = false;
      this.$store.dispatch('SET_HOME', res);
    }).catch((e) => {
      this.loading = false;
      this.error = true;
      this.errorMsg = e.message;
    });
  },
};
</script>
